<template>
  <div id="page">
    <div class="bg"></div>
    <header>
      <el-page-header @back="goBack" :content="$route.query.title">
      </el-page-header>
    </header>
    <div class="container">
      <div v-show="isShow">
        <el-card class="box-card" v-for="(item, index) in list" :key="index">
          <div slot="header" class="clearfix">
            <span>{{ item.title }}</span>
          </div>
          <div :id="'bar' + index"></div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts/core";
import "echarts-liquidfill";
import {
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  DatasetComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  BarChart,
  LegendComponent,
  CanvasRenderer,
  LabelLayout,
]);
export default {
  name: "branch",
  data() {
    return {
      isShow: true,
      isMoney: false,
      list: [
        {
          title: "按月SKU数量",
          name: "件",
          data: [
            7000, 6000, 5000, 8000, 7000, 8400, 4000, 5000, 3000, 5000, 2340,
          ],
        },
        {
          title: "按月交易金额",
          name: "万元",
          data: [
            7000, 6000, 5000, 8000, 7000, 8500, 4000, 5000, 3000, 5000, 2340,
          ],
        },
        {
          title: "按月交易次数",
          name: "次",
          data: [
            2000, 6000, 5000, 8000, 7000, 6500, 4000, 5000, 3000, 5000, 40,
          ],
        },
      ],
    };
  },
  methods: {
    drawBar(dom, info) {
      var chartDom = document.getElementById(dom);
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          formatter: "{b}: {c}" + info.name,
        },

        grid: {
          x: 65,
          y: 50,
          x2: 5,
          y2: 20,
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
          name: info.name,
        },
        series: [
          {
            data: info.data,
            type: "bar",
            showBackground: true,
            barWidth: 30,
            itemStyle: {
              borderRadius: [80, 80, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#188df0" },
                { offset: 1, color: "#fff" },
              ]),
            },
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    drawAmountBar() {
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
          name: "万元",
        },
        series: [
          {
            name: "医疗业务",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 302, 301, 334, 390, 330, 320, 254, 124, 125, 155],
          },
          {
            name: "养老业务",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230],
          },
          {
            name: "供应商业务",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 130],
          },
          {
            name: "药店业务",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [150, 212, 201, 154, 190, 330, 410, 201, 154, 190, 130],
          },
          {
            name: "电商业务",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320, 901, 934, 1290, 130],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    goBack() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.query.title == "电商数据") {
        this.isShow = true;
        this.isMoney = false;
        for (let index = 0; index < this.list.length; index++) {
          let value = "bar" + index;
          this.drawBar(value, this.list[index]);
        }
      } else {
        this.isShow = false;
        this.isMoney = true;
        this.drawAmountBar();
      }
    });
  },
};
</script>
<style lang="scss" scoped>
#page {
}
// .bg {
//   position: fixed;
//   height: 100%;
//   width: 100%;
//   background-color: $backgroundColor;
// }
header {
  position: fixed;
  left: -20px;
  z-index: 3;
  width: 100%;
  padding: 20px 40px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
}
.container {
  position: relative;
  top: 84px;
  width: 85%;
  max-width: 1280px;
  min-height: 700px;
  padding-bottom: 20px;
  margin: 0 auto 84px;
  background-color: #fff;
  .el-card {
    margin-bottom: 20px;
  }
  #bar0,
  #bar1,
  #bar2 {
    height: 400px;
    width: 100%;
  }
  .money-box {
    height: 100%;
    width: 100%;
  }
  #main1 {
    height: 80vh;
    width: 100%;
  }
}
</style>